<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <th:block th:include="include :: header('新增GS1-128码')"/>
    <link rel="stylesheet" href="../../../static/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../../static/udi/dist/css/layui.css">
</head>
<body>
<div class="container-fluid">
    <div class="panel" style="width: 100%">
        <div class="panel-heading" style="margin: 5px;background-color:	#F5F5F5">
            <p><b>注意</b>:[商品/通用名] 键入两位开始补全</p>
        </div>
        <div class="panel-body">
            <form id="form-gs1-add" class="form-horizontal m">
                <div class="form-group">
                    <label class="col-sm-2 control-label">商品/通用名：</label>
                    <div class="col-sm-10">
                        <input id="cpmc" name="cpmctymc" class="form-control" autocomplete="off" required>
                    </div>
                </div>
                <input id="hide" hidden/>
                <div class="form-group">
                    <label class="col-sm-2 control-label">规格型号：</label>
                    <div class="col-sm-10">
                        <select id="ggxh" name="zxxsdycpbs" class="form-control" required></select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">生产日期：</label>
                    <div class="col-sm-4">
                        <input name="produceDate" id="produceDate" class="form-control" autocomplete="off">
                    </div>
                    <label class="col-sm-2 control-label">有效期至：</label>
                    <div class="col-sm-4">
                        <input name="validEndDate" id="validEndDate" class="form-control" autocomplete="off">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">批号：</label>
                    <div class="col-sm-4">
                        <input name="batchNum" id="batchNum" class="form-control" autocomplete="off">
                    </div>
                    <label class="col-sm-2 control-label">生成数量：</label>
                    <div class="col-sm-4">
                        <input name="num" id="num" class="form-control" autocomplete="off" required>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- 全局js -->
<th:block th:include="include :: footer"/>
<!--<script src="../../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../../../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
<script src="../../../static/ajax/libs/typeahead/bootstrap3-typeahead.min.js" th:src="@{/ajax/libs/typeahead/bootstrap3-typeahead.min.js}"></script>
<script src="../../../static/udi/dist/layui.js" th:src="@{/udi/dist/layui.js}"></script>-->
<script th:inline="javascript">

    $(function () {
        //时间插件
        layui.use('laydate', function(){
            var laydate = layui.laydate;
            laydate.render({
                elem: '#produceDate',
                type:"datetime"
            });
            laydate.render({
                elem: '#validEndDate' ,
                type:"datetime"
            });
        });
        //初始化补全
        $("#cpmc").typeahead({
            minLength: 2,//键入字数多少开始查询补全
            showHintOnFocus: false,//将显示所有匹配项
            fitToElement: true,//选项框宽度与输入框一致
            items:5,//下拉数量
            delay: 500,//延迟时间
            source: function (query, process) {//指定数据源，query代表输入框中你的输入值（即查询值）,process回调函数
                var arr=[];
                $.ajax({
                    url: "/gs1manage/getDi",
                    type: "post",
                    async:false,
                    data: {data:query},
                    success: function (data) {//data表示查询结果，自动补全的数
                        $("#hide").attr('value',JSON.stringify(data));
                        //开始初始化
                        $.each(data,function (index,item){
                            arr.push(item.cpmctymc)
                        })
                    },
                });
                process(Array.from(new Set(arr)));//去重回显
            },
            updater: function (obj){
                return obj;
            },
            afterSelect:function (obj) {
                $("#ggxh").empty();
                $.each(JSON.parse($("#hide").val()),function (i,o) {
                    if(obj===o.cpmctymc){
                        $("#ggxh").append('<option value='+o.zxxsdycpbs+'>'+o.ggxh+'</option>')
                    }
                })
            }
        });
        //实时验证
        $("#form-gs1-add").validate({
            onkeyup: false,
            rules:{
                num:{
                    positiveinteger: true
                }
            },
            messages: {
                num:{
                    positiveinteger: "必须输入正整数！"
                }
            },
            focusCleanup: true//当表单得到焦点时，移除在该表单上的errorClass并隐藏所有错误消息
        });
    })
    // 添加自定义校验规则，校验正整数
    $.validator.addMethod("positiveinteger", function(value, element) {
        var Val = parseInt(value);
        return Val > 0 && (Val + "") == value;
    }, "请输入正整数");
    //提交
    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save("/Gs1Generate/createGs1", $('#form-gs1-add').serialize());
        }
    }
</script>
</body>
</html>